<template>
	<div >
		<!-- @tab-click="handleClick" -->
<!-- =========================================================================================================================================================== -->

	<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
		<el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
		{{item.content}}
		</el-tab-pane>
	</el-tabs>
		<!-- <el-tab-pane label="商品管理" name="first"> -->
		<!-- 	<el-container>
				<el-header> -->
					<el-row :gutter="20">
							<el-col :span="6">
								<el-select v-model="value" placeholder="商品状态">
									<el-option v-for="item in ta" :key="item.value"  :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-col>
							<el-col :span="11"><el-input maxlength="2" type="text" v-model="goodsParam.name" placeholder="请输入商品名称、分类名称进行查询"></el-input></el-col>
							<el-col :span="2">
								<el-button type="primary" @click="query()">查询</el-button>
							</el-col>
							<el-col :span="2">
							<el-button type="primary" @click="delate()">删除</el-button>
						   </el-col>
						   <el-col :span="2">
							   <el-button type="primary" @click="addTab(editableTabsValue)"> 鉴定</el-button>		
						   </el-col>
					  </el-row><br>
					  <!-- <el-input maxlength="2" type="text" v-model="goodsParam.name" placeholder="请输入商品名称、分类名称进行查询"></el-input> -->
					  
					  <el-row :gutter="20">
						  <el-col :span="3">
						  	<div class="block" >
						  		 <el-button type="primary" >录入日期</el-button>
						  	 </div>
						  </el-col>
					    <el-col :span="7">
							<div class="block" >
								 
								 <el-date-picker  v-model="goodsParam.StartTime"  type="date" >
								 </el-date-picker>	 
							 </div>
						</el-col>
					    <el-col :span="7">
							
							<div class="block" >
							  <el-date-picker  v-model="goodsParam.EndTime"  type="date" >
							  </el-date-picker>
							</div>	
						</el-col>
						<el-col :span="4">
							<el-button type="primary" @click="updateGoods()">修改商品状态</el-button>
						</el-col>
						<el-col :span="2">
							<el-button type="primary" @click="addTab(editableTabsValue)"> 评估</el-button>
						</el-col>
					  </el-row><br><br>
					  
					  
					
						<!-- <el-select v-model="values" placeholder="请选择">
					  <el-option v-for="item in sends" :key="item.values"  :label="item.label" :value="item.values">
					  </el-option>
					</el-select> -->
					  	
					  
				<!-- 	  
				  </el-header>
				  <el-main> -->

				<el-table ref="ids" tooltip-effect="dark" :data="goods" border style="width: 100%"  @selection-change="handleSelectionChange">
				   <el-table-column type="selection"  width="55" >
					  </el-table-column>
					 
				   <el-table-column  prop="goodsId"  label="编号"  width="80">
					   <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
				   </el-table-column>
				   <el-table-column  prop="goodsName"  label="商品名称"  width="220">
				   </el-table-column>
						<el-table-column  prop="sortName"  label="分类"  width="100">
						</el-table-column>
				   <el-table-column  prop="goodsEnteringPerson"  label="录入人" width="80">
				   </el-table-column>
					<el-table-column  prop="goodsDefinePerson"  label="鉴定人" width="80">
					</el-table-column>
					<el-table-column  prop="goodsAssessPerson"  label="评估人" width="80">
					</el-table-column>
					<el-table-column  prop="goodsEnteringTime"  label="录入时间" width="180">
					</el-table-column>
					<el-table-column  prop="goodsStatus"  label="状态" width="80">
					</el-table-column>
					<!-- <el-table-column   label="操作" width="150">
					<template slot-scope="scope">
							<el-button @click="delate(scope.row)" type="text" size="small">删除</el-button>
							<el-button @click="send(scope.row)" type="text" size="small">分配</el-button>
						  </template>
					</el-table-column> -->
				 </el-table>
					
				<el-row type="flex" :gutter="20">  
				  <el-col :span="16" align="middle" >
					  <div class="grid-content bg-purple">
						  <!-- （1） 分页组件，数据绑定到pageData对象 page-size每页显示条目个数 total总条目数 current-page-->
						  <!-- (4) 监听当前页码改变事件current-change   -->
						  <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size" :current-page="pageData.current" @current-change="handleChange">
						  </el-pagination>
						</div>
				  </el-col> 
				</el-row>
				
				 <!-- </el-main>
				</el-container> -->
			<!-- </el-tab-pane> -->
<!-- ================================================================================================================================================================================================================ -->
			
		    <!-- <el-tab-pane label="新商品" name="second"> -->
				<el-row>
				  <el-col :span="3">
					  门店来源 ：
				  </el-col>
				  <el-col :span="12">
					  <el-input v-model="goodsParam.goodsName" placeholder="请输入门店名称"></el-input> 
				  </el-col>  
				</el-row><br />
				<el-row>
				  <el-col :span="3">
						录入人 ：
				  </el-col>
				  <el-col :span="12">
						<el-input v-model="goodsParam.goodsEnteringPerson" placeholder="请输入录入人姓名"></el-input>				  </el-col>  
				</el-row><br>
				<el-row>
				  <el-col :span="3">
						商品分类 ：
				  </el-col>
				  <el-col :span="12">
							<el-input v-model="goodsParam.sortName" placeholder="请输商品分类"></el-input>
				  </el-col>  
				</el-row><br>
				<el-row>
				  <el-col :span="3">
						商品名称 ：
				  </el-col>
				  <el-col :span="12">
							<el-input v-model="goodsParam.goodsName" placeholder="请输商品名称"></el-input>
				  </el-col>  
				</el-row><br>
				<el-row>
				  <el-col :span="3">
						商品品牌 ：
				  </el-col>
				  <el-col :span="12">
					<el-select v-model="brandName" placeholder="商品品牌">
						<el-option v-for="item in goodsBrandName" :key="item.value"  :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				  </el-col>  
				</el-row><br>
				<el-row>
				  <el-col :span="3">
						商品货号 ：
				  </el-col>
				  <el-col :span="12">
							<el-input v-model="goodsParam.goodsNum" placeholder="请输商品货号"></el-input>
				  </el-col>  
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					客户首买价 ：
				  </el-col>
				  <el-col :span="12" >
						<el-input v-model="goodsParam.goodsFirstBuy" placeholder="请输客户首买价"></el-input>
				  </el-col>
					<el-col :span="1">
						元
					</el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					商品描述 ：
				  </el-col>
				  <el-col :span="12" >
						<el-input type="textarea" :rows="2" placeholder="请输入描述内容" v-model="goodsParam.goodsDepict"></el-input>   				  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="8"></el-col>
				  <el-col :span="4">
					  <el-button type="primary" @click="addGoods()">添加新商品</el-button>
				   </el-col>
				</el-row>
				
				
			<!-- </el-tab-pane> -->
			
<!-- =========================================================================================================================================================== -->
			
		    <!-- <el-tab-pane label="商品鉴定" name="third"> -->
				
					
				
				  <div class="block" style="width:260px; height:260px;  float: left;">
				    <span class="demonstration">正面</span>
				    <el-image :src="src"></el-image>
				  </div>
				  <div class="block" style="width:260px; height:100px;margin-left: 20px; float: left;">
				    <span class="demonstration" >背面</span>
				    <el-image :src="src">
				      <div slot="placeholder" class="image-slot"> 加载中<span class="dot">...</span>
				      </div>
				    </el-image>
				  </div>
				<div class="block" style="width:260px; height:100px; margin-left: 20px; float: left;">
				  <span class="demonstration" >侧面</span>
				  <el-image :src="src">
				    <div slot="placeholder" class="image-slot"> 加载中<span class="dot">...</span>
				    </div>
				  </el-image>
				</div>
				
				
				<div style="clear: both;">
					
				</div>
		
		
				<el-row>
				  <el-col :span="3">
					新旧程度 ：
				  </el-col>
				  <el-col :span="12" >
					<el-select v-model="identifyDegree" placeholder="新旧程度">
						<el-option v-for="item in Degree" :key="item.value"  :label="item.label" :value="item.value">
						</el-option>
					 </el-select>   				  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					备注 ：
				  </el-col>
				  <el-col :span="12" >
						<el-input type="textarea" :rows="2" placeholder="请输入备注内容" v-model="goodsParam.goodsDepict"></el-input>     				  
				  </el-col>
				</el-row><br>
				<el-row :gutter="20">
				  <el-col :span="8">
					  <el-button type="primary" @click="identifyTure()">鉴定真品</el-button>
				  </el-col>
				  <el-col :span="8">
					  <el-button type="primary" @click="identifyFalse()">鉴定为假货</el-button>	
				  </el-col>
				  <el-col :span="8">
				  		<el-button type="primary" @click="identifyInvalid()">资料不全</el-button>		  
				  </el-col>
				</el-row><br><br><br>
				
							
			<el-container>
			  <el-header>历史鉴定表</el-header>
			  <el-main>
				  
				  <el-table :data="identify" border style="width: 100%">
				     <el-table-column  prop="identifyId"  label="序号"  width="80">
				     </el-table-column>
				     <el-table-column  prop="identifyType"  label="真假"  width="100">
				     </el-table-column>
				  		<el-table-column  prop="identifyDegree"  label="新旧程度"  width="100">
				  		</el-table-column>
				     <el-table-column  prop="goodsDefinePerson"  label="鉴定人" width="80">
				     </el-table-column>
				  	<el-table-column  prop="goodsDefineTime"  label="鉴定时间" width="180">
				  	</el-table-column>
				  	<el-table-column  prop="identifyRemark"  label="备注" width="80">
				  	</el-table-column>
				   </el-table>
				  	
				  <el-row type="flex" :gutter="20">  
				    <el-col :span="16" align="middle" >
				  	  <div class="grid-content bg-purple">
				  		  <!-- （1） 分页组件，数据绑定到pageData对象 page-size每页显示条目个数 total总条目数 current-page-->
				  		  <!-- (4) 监听当前页码改变事件current-change   -->
				  		  <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size" :current-page="pageData.current" @current-change="handleChange">
				  		  </el-pagination>
				  		</div>
				    </el-col> 
				  </el-row>
				  
			  </el-main>
			</el-container>
			<!-- </el-tab-pane> -->
			
<!-- =========================================================================================================================================================== -->			
		    <!-- <el-tab-pane label="商品评估" name="fourth"> -->
				<el-row>
				  <el-col :span="3">
					官方价 ：
				  </el-col>
				  <el-col :span="12" >
					<el-input v-model="goodsParam.goodsName" placeholder="请输入官方价格"></el-input>				  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					评估价 ：
				  </el-col>
				  <el-col :span="12" >
					<el-input v-model="goodsParam.goodsName" placeholder="请输入评估价格"></el-input>				  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					典当价 ：
				  </el-col>
				  <el-col :span="12" >
					<el-input v-model="goodsParam.goodsName" placeholder="请输入典当价格"></el-input>			  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					收购价 ：
				  </el-col>
				  <el-col :span="12" >
					<el-input v-model="goodsParam.goodsName" placeholder="请输入收购价格"></el-input>			  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					售卖价 ：
				  </el-col>
				  <el-col :span="12" >
					<el-input v-model="goodsParam.goodsName" placeholder="请输入售卖价格"></el-input>		  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					租价 ：
				  </el-col>
				  <el-col :span="12" >
					<el-input v-model="goodsParam.goodsName" placeholder="请输入租借价格"></el-input>	  
				  </el-col>
				</el-row><br>
				<el-row>
				  <el-col :span="3">
					备注 ：
				  </el-col>
				  <el-col :span="12" >
					<el-input v-model="goodsParam.goodsName" placeholder="请输备注内容"></el-input>	  
				  </el-col>
				</el-row><br>
				<el-row :gutter="20">
				  <el-col :span="8">
					  <el-button type="primary" @click="addPrice()">估计确认</el-button>
				  </el-col>
				 
				</el-row><br><br><br>
				
				<el-container>
				  <el-header>历史评价记录</el-header>
				  <el-main>
					  <el-table :data="assess" border style="width: 100%">
					     <el-table-column  prop="assessId"  label="序号"  width="80">
					     </el-table-column>
					     <el-table-column  prop="assessMoney1"  label="官方价"  width="100">
					     </el-table-column>
					  		<el-table-column  prop="assessMoney2"  label="评估价"  width="100">
					  		</el-table-column>
					     <el-table-column  prop="goodsAssessPerson"  label="评估人" width="80">
					     </el-table-column>
					  	<el-table-column  prop="goodsAssessTime"  label="评估时间" width="180">
					  	</el-table-column>
					  	<el-table-column  prop="assessRemark"  label="备注" width="80">
					  	</el-table-column>
					   </el-table>
					  	
					  <el-row type="flex" :gutter="20">  
					    <el-col :span="16" align="middle" >
					  	  <div class="grid-content bg-purple">
					  		  <!-- （1） 分页组件，数据绑定到pageData对象 page-size每页显示条目个数 total总条目数 current-page-->
					  		  <!-- (4) 监听当前页码改变事件current-change   -->
					  		  <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size" :current-page="pageData.current" @current-change="handleChange">
					  		  </el-pagination>
					  		</div>
					    </el-col> 
					  </el-row>
				  </el-main>
				</el-container>
				
				
				
		<!-- 	</el-tab-pane>
		  </el-tabs> -->
		  
		
	</div>
</template>

<script>
	export default{
		name:'ShowGoods',
		data(){
			return{
				assess:[],
				identify:[],
				identifyDegree:'',
				Degree:[{
				  value: '全新',
				  label: '全新'
				}, {
				  value: '9成新',
				  label: '9成新'
				}, {
				  value: '8成新',
				  label: '8成新'
				}, {
				  value: '7成新',
				  label: '7成新'
				}],
				src:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				goodsParam:{},
				goods:[],
				value:'',
				ta:[{
				  value: '待鉴定',
				  label: '待鉴定'
				}, {
				  value: '待评估',
				  label: '待评估'
				}, {
				  value: '已评估',
				  label: '已评估'
				}, {
				  value: '无效',
				  label: '无效'
				}],
				
				brandName:'',
				goodsBrandName:[{
				  value: '路易威登',
				  label: '路易威登'
				}, {
				  value: '劳力士',
				  label: '劳力士'
				}, {
				  value: 'LV',
				  label: 'LV'
				}, {
				  value: '江诗丹顿',
				  label: '江诗丹顿'
				}],
				// 存储分页数据
				pageData: {
					total: 10,
					size: 10,
					current: 1
				},
				
				ids: [],
			editableTabsValue: '2',
			        editableTabs: [{
			          title: 'Tab 1',
			          name: '1',
			          content: 'Tab 1 content'
			        }, {
			          title: 'Tab 2',
			          name: '2',
			          content: 'Tab 2 content'
			        }],
			        tabIndex: 2
			  
			}
		},
		methods:{
			addTab(targetName) {
			        let newTabName = ++this.tabIndex + ''
			        this.editableTabs.push({
			          title: 'New Tab',
			          name: newTabName,
			          content: 'New Tab content'
			        })
			        this.editableTabsValue = newTabName
			      },
			      removeTab(targetName) {
			        let tabs = this.editableTabs
			        let activeName = this.editableTabsValue
			        if (activeName === targetName) {
			          tabs.forEach((tab, index) => {
			            if (tab.name === targetName) {
			              let nextTab = tabs[index + 1] || tabs[index - 1]
			              if (nextTab) {
			                activeName = nextTab.name
			              }
			            }
			          })
			        }
			        
			        this.editableTabsValue = activeName
			        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
			      },
			identify(){
				
			},
			identifyInvalid(){
				this.$http.post('/identify/identifyInvalid',{
						identifyRemark:identify.goodsDepict,
						goodsId:this.ids[0]
					}).then(res=>{
					if (res.data.state) {
						this.$message({
						  message: '资料不全，鉴定不了',
						  type: 'success'
						})
					}
					this.query()		
				}).catch(err=>{
					console.log(err)
				})
			},
			identifyFalse(){
				this.$http.post('/identify/identifyFalse',{
						identifyRemark:identify.goodsDepict,
						goodsId:this.ids[0]
					}).then(res=>{
					if (res.data.state) {
						this.$message({
						  message: '已鉴定为假货',
						  type: 'success'
						})
					}
					this.query()		
				}).catch(err=>{
					console.log(err)
				})
			},
			identifyTure(){
				this.$http.post('/identify/identifyTure',{
						identifyRemark:identify.identifyRemark,
						identifyDegree:this.identifyDegree,
						goodsId:this.ids[0]
					}).then(res=>{
					if (res.data.state) {
						this.$message({
						  message: '已鉴定为真品',
						  type: 'success'
						})
					}
					this.query()		
				}).catch(err=>{
					console.log(err)
				})
			},
			updateGoods(){
				console.log(this.ids[0])
				this.$http.post('/goods/updateGoods',{ 
					goodsStatus:this.value ,
					goodsId:this.ids[0]
					}).then(res=>{
					
					if (res.data.state) {
						this.$message({
						  message: '修改成功',
						  type: 'success'
						})
					}
					this.query()		
				}).catch(err=>{
					console.log(err)
				})
			},
			handleChange(data) {
				// console.log(data)
				//修改当前页，并且发起新的查询
				this.pageData.current = data
				// console.log(this.pageData.current)
				this.query()
			},
			query(){
				this.$http.get('/goods/queryAllGoods',{
					params:{
						goodsStatus: this.value,
						goodsName:this.goodsParam.name,
						sortName:this.goodsParam.name,
						StartTime:this.goodsParam.StartTime,
						EndTime:this.goodsParam.EndTime,
						current: this.pageData.current //携带当前页数据
					}
				}).then(res=>{
					console.log(res)
					 if (res.data.state) {
						//3. 查询，返回分页相关数据，赋值给pageData
						Object.assign(this.pageData, res.data.data)
						this.goods = res.data.data.records	
						console.log(res.data.data.records)
						for(let i=0;i<res.data.data.records.length;i++){
							console.log(res.data.data.records[i].goodsEnteringTime)
							let time = res.data.data.records[i].goodsEnteringTime
							let date = new Date(time)
							
							// console.log([date.getFullYear(),date.getMonth(),date.getDate()].join('-'))	
							// console.log([date.getHours(),date.getSeconds(),date.getMinutes()].join(':'))
							this.goods[i].goodsEnteringTime = [date.getFullYear(),date.getMonth()+1,date.getDate()].join('-')+' '+[date.getHours(),date.getSeconds(),date.getMinutes()].join(':')
						}
					}	
				}).catch(err=>{
					console.log(err)
				})
			},
			handleSelectionChange(val){
				console.log(val)
				this.ids=[]
				for(let i=0;i<val.length;i++){
					this.ids.push(val[i].goodsId)
				}
				console.log(this.ids)
			},
			delate(){
				console.log(this.ids)
				this.$http.post('/goods/delateGoods',this.ids).then(res=>{
					console.log(res.data)
					if (res.data.state) {
						this.$message({
						  message: '删除成功',
						  type: 'success'
						})
					}
					// rows.splice(index, 1)
					this.query()		
				}).catch(err=>{
					console.log(err)
				})
			},
			addGoods(){
				this.$http.post('',this.goodsParam).then(res=>{
					console.log(res.data)
					if (res.data.state) {
						this.$message({
						  message: '添加新商品成功',
						  type: 'success'
						})
					}
					this.query()		
				}).catch(err=>{
					console.log(err)
				})
			}
		},
		mounted(){
			this.query()
		}, 
	}
</script>

<style>
</style>
